<template>
  <div class="LogsList">
    <div class="List-header">
      <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keyword" @keyup="search">
      </el-input>
      <el-button type="success" class="btn-newLog" @click="newLog">写日志</el-button>
    </div>
    <el-divider><i class="el-icon-document"></i></el-divider>
    <transition-group name="LogsList" tag="div" appear>
      <el-card class="logInfo" shadow="hover" v-for="log in search(keyword)" :key="log.id">
        <h3 @click="showLog(log.id)">{{log.title}}</h3>
        <p class="authorInfo">
          <span class="user_name">{{ log.author_name ? ('@'+log.author_name) : '匿名'}}</span>
          <span>·</span>
          <span>{{log.creator_time | timeFormat}}</span>
        </p>
      </el-card>
    </transition-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        logsList: [],
        keyword: ''
      }
    },
    created() {
      this.getLogsList()
    },
    methods: {
      getLogsList: async function () {
        const {
          data: res
        } = await this.$http.get('/logs')
        if (res.meta.success == false) return this.$message.error(res.meta.message)
        this.logsList = res.data
      },
      showLog: function (id) {
        this.$router.push('/logs/show/' + id)
      },
      search: function (word) {
        var result = [];
        for (var i = 0; i < this.logsList.length; i++) {
          if (this.logsList[i].title.toLowerCase().indexOf(word.toString().toLowerCase()) > -1) {
            result.push(this.logsList[i]);
          }
        }
        return result;
      },
      newLog: function () {
        this.$router.push('/logs/new')
      }
    },
    filters: {
      timeFormat: function (dateStr) {
        var date = new Date(dateStr);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
        return `${year}年${month}月${day}日  ${h}:${m}:${s}`
      }
    }
  }

</script>

<style lang="less">
  //日志列表容器
  .LogsList {
    padding-top: 20px;
    //列表头
    .List-header{
      display: flex;
      //新建按钮
      .btn-newLog{
        margin-left: 10px;
      }
    }

    //单个日志信息卡片
    .logInfo {
      min-height: 100px;
      padding: 20px 0 10px 0;
      cursor: pointer;

      //卡片内容
      .el-card__body {
        padding: 0;
      }


      //日志标题
      h3 {
        padding: 0 20px;
        margin: 0;
        min-height: 60px;
        text-align: left;
        text-overflow: ellipsis;
      }

      //作者信息
      .authorInfo {
        margin: 0;
        padding: 0 20px;
        font-size: 18px;
        color: #666;
        text-align: left;
      }

      //用户名
      .user_name:hover {
        cursor: pointer;
        color: rgb(255, 208, 0);
      }
    }

    .logInfo:hover {
      color: rgb(0, 132, 255);
    }

    .LogsList-enter,
    .LogsList-leave-to {
      opacity: 0;
      // display: none;
      transform: translateY(100px);
    }

    .LogsList-enter-active,
    .LogsList-leave-active {
      transition: all .5s;
    }

    .LogsList-move {
      transition: all .5s;
    }

    .LogsList-leave-active {
      position: absolute;
    }
  }

</style>
